<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="710px">
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="适用渠道" align="center" prop="channel" />
			<el-table-column label="版本名" align="center" prop="version_name" />
			<el-table-column label="版本号" align="center" prop="version_no" />
			<el-table-column label="开启开关" align="center">
				<template #default="scope">
					<el-switch v-model="scope.row.switch" :active-value="1" :inactive-value="0" @change="onSwitch(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column :formatter="formatTime" label="创建时间" align="center" prop="update_time" />
		</el-table>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { versionHistory, versionSwitch } from '/@/api/admin/index';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
	setup() {
		const state = reactive({
			title: '查看APP历史版本',
			open: false,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				channel: '',
			},
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const formRef = ref(null);

		/********** 点击事件(on开头) **********/
		const onSwitch = (row: any) => {
			ElMessageBox.confirm(`是否确认${Number(row.switch) == 1 ? '开启' : '关闭'}该版本？`, '提示', { type: 'warning' })
				.then(() => {
					return _versionSwitch({ switch: row.switch, version_id: row.id });
				})
				.then(() => {
					ElMessage.success(`${Number(row.switch) == 1 ? '开启' : '关闭'}成功`);
					_versionHistory(state.queryParams);
				})
				.catch(() => {
					row.switch = row.switch ? 0 : 1;
				});
		};
		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			state.open = true;
			state.queryParams.channel = config.channel;
			_versionHistory(state.queryParams);
		};
		// 录入时间字典
		const formatTime = (row: any) => {
			return timeDictionary(row.update_time);
		};

		/**************************网络请求************************/
		// APP版本添加
		const _versionHistory = (params: object) => {
			versionHistory(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};
		// 版本开关
		const _versionSwitch = (params: object) => {
			return versionSwitch(params);
		};
		return {
			formRef,
			openDialog,
			onSwitch,
			formatTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
